<!--采购单页面-->
<template>
  <div>
    <!-- 查询条件 -->
    <template>
      状态:
      <el-select v-model="SelectPurchaseDTO.state" clearable placeholder="请选择状态" @change="getValue">
        <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
        </el-option>
      </el-select>
      <el-button icon="el-icon-search" @click="getData(SelectPurchaseDTO.value)" circle></el-button>
      <el-button class="el-icon-refresh" @click="refresh()"></el-button>
    </template>

    <el-row>
      <!-- 表格数据 -->
      <template>
        <el-table
            :data="SelectPurchaseVo"
            style="width: 100%">
          <el-table-column
              prop="id"
              label="编号">
          </el-table-column>
          <el-table-column
              prop="supplierName"
              label="供应商">
          </el-table-column>
          <el-table-column
              prop="createUser"
              label="创建人">
          </el-table-column>
          <el-table-column
              prop="createTime"
              label="创建时间">
          </el-table-column>
          <el-table-column
              prop="updateUser"
              label="最后修改人">
          </el-table-column>
          <el-table-column
              prop="updateTime"
              label="修改时间">
          </el-table-column>
          <el-table-column
              prop="state"
              label="状态">
            <template slot-scope="scope">
              <span v-if="scope.row.state===0">待分配</span>
              <span v-else-if="scope.row.state===1">未开始</span>
              <span v-else-if="scope.row.state===2">采购中</span>
              <span v-else-if="scope.row.state===3">已完成</span>
            </template>
          </el-table-column>
          <el-table-column
              label="操作"
              width="180">
            <template slot-scope="scope">
              <el-button type="primary" @click="details(scope)" size="mini">详情</el-button>
              <el-button type="info" v-if="scope.row.state===0" @click="showSupplier(scope)" size="mini">分配供应商</el-button>
              <el-button type="info" v-if="scope.row.state===1" @click="startPurchase(scope)" size="mini">
                开始采购
              </el-button>
              <el-button type="primary" v-else-if="scope.row.state===2" @click="endingPurchase(scope)" size="mini">
                采购完成
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-drawer
            title="采购详情"
            :visible.sync="buy"
            direction="rtl"
            custom-class="suuplier"
            size="50%">
          <el-table :data="PurchaseDetailsList">
            <el-table-column property="goodsName" label="商品名" width="90"></el-table-column>
            <el-table-column property="categoryType" label="品类" width="90"></el-table-column>
            <el-table-column property="meteriType" label="物料" width="90"></el-table-column>
            <el-table-column property="producter" label="产品线" width="90"></el-table-column>
            <el-table-column property="purity" label="成色" width="90"></el-table-column>
            <el-table-column property="quantity" label="数量" width="90"></el-table-column>
            <el-table-column property="weight" label="重量(克)" width="90"></el-table-column>
            <el-table-column property="unitPrice" label="单价(元)" width="90"></el-table-column>
          </el-table>

        </el-drawer>
        <!-- 分页插件 -->
        <div class="block" style="margin: auto">
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page= this.SelectPurchaseDTO.current
              :page-sizes="[5, 10, 20, 40]"
              :page-size= this.SelectPurchaseDTO.pageSize
              layout="total, sizes, prev, pager, next, jumper"
              :total= this.total
              >
          </el-pagination>
        </div>

        <!-- 分配供应商抽屉 -->
        <el-drawer
            title="请选择供应商"
            :visible.sync="supplier"
            direction="rtl"
            size="50%">
          <template>
          <el-table
            ref="singleTable"
            :data="SupplierVO"
            highlight-current-row
            @current-change="open"
            style="width: 100%">
            <el-table-column
              property="name"
              label="名称"
              width="120">
            </el-table-column>
            <el-table-column
              property="area"
              label="所在地区"
              width="120">
            </el-table-column>
            <el-table-column
              property="vipLevel"
              label="等级">
            </el-table-column>
            <el-table-column
              property="email"
              label="联系邮箱">
            </el-table-column>
          </el-table>

          </template>
        </el-drawer>

      </template>
    </el-row>


  </div>


</template>

<script>
export default {

  inject:["reload"],
  SelectDemandDTO() {
    return {}
  },
  data() {
    return {
      perms: "",
      buy: false,
      supplier: false,
      FindSupplierDTO:{
        "name":"",
        "status":"0",
        "type":1
      },
      SupplierVO:{},
      AddSupplierDTO:{
        "id":null,
        "name":""
      },
      SelectPurchaseVo: {},
      PurchaseDetailsList: [],
      SelectDemand: {},
      DemandDetails: {},
      SelectPurchaseDTO: {
        "current": 1,
        "pageSize": 5,
        "value": this.value,
        "state": null
      },
      currentRow: null,
      options: [
        {
          value: '0',
          label: '待分配'
        },
        {
          value: '1',
          label: '未开始'
        }
        , {
          value: '2',
          label: '采购中'
        }, {
          value: '3',
          label: '已完成'
        }],
      value: '',
      total:''

    }
  },
  mounted: function () {
    this.getData()

  },
  methods: {
    refresh(){
      this.getData()
    },
    //分页
    handleSizeChange(val) {
      this.SelectPurchaseDTO.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {//修改页码时触发
      //给当前页属性赋值

      this.SelectPurchaseDTO.current = val
      //发请求获取数据  调用方法
      this.getData()
    },
    getData: function () {
      this.$axios.post("/purchase/buyPurchase/findPurchaseByCondition", this.SelectPurchaseDTO).then(res => {
        this.SelectPurchaseVo = res.data.data.data
        this.total = res.data.data.total
      })
    },

    startPurchase: function (scope) {
      this.$axios.get("/purchase/buyPurchase/updateState/" + "2/id/" + +scope.row.id).then(res => {
            if (res.data.code === 200) {
              scope.row.state = 2
              this.$message.success("该采购单已开始进行")
            }
          }
      )
    },
    showSupplier(scope){
      this.supplier = true
      this.AddSupplierDTO.id = scope.row.id
      this.$axios.post("/businessCompetitor/findSupplierBycondition",this.FindSupplierDTO).then(res=> {
        this.SupplierVO = res.data.data
      })
    },
    endingPurchase: function (scope) {
      this.$axios.get("/purchase/buyPurchase/updateState/" + "3/id/" + +scope.row.id).then(res => {
            if (res.data.code === 200) {
              scope.row.state = 3
              this.$message.success("该采购单已完成")
            }
          }
      )
    },
    details: function (scope) {
      this.buy = true
      this.$axios.get("/purchase/buyPurchase/findPurchaseDetails/" + scope.row.demandId).then(res => {
        console.log(res.data.data)
            this.PurchaseDetailsList = res.data.data

          }
      )
    },

    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
    },

    open(val) {

      this.currentRow = val
      this.AddSupplierDTO.name = this.currentRow.name
      this.$confirm('是否选择  '+  this.currentRow.name + '  作为供应商?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '我再考虑考虑',
        type: 'warning'
      }).then(() => {
        this.$axios.post("/purchase/buyPurchase/insertSupplierToPurchase",this.AddSupplierDTO).then(res=>{
          this.supplier = false
        this.$message({
          type: 'success',
          message: '添加供应商成功!',
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消成功'
        })}).finally(() => {
          this.reload();
        });
      });
    }
  }
}
</script>
